<template>
    <div>
        <div>
            <div style="float:left">
                <Input style="width:250px" v-model="name">
                <span slot="prepend">模板名称：</span>
                <Button slot="append" icon="ios-search" @click='findByTempName'></Button>
                </Input>
            </div>
    
            <Button-group>
                <Button @click="modal_add_status = true">新增</Button>
                <Button @click="exportData(2)">导出</Button>
            </Button-group>
        </div>
    
        <Table border stripe :columns="header" :data="data_list" size="small" ref="table" class="table" @on-row-click="rowClick"></Table>
    
        <Modal v-model="modal_add_status" title="添加短信模板" @on-ok="option_add_save" @on-cancel="modal_cancel">
            <Form :model="temp_add_data" :label-width="80">
                <Form-item label="模板名称：">
                    <Input v-model.trim="temp_add_data.name" placeholder="请输入"></Input>
                </Form-item>
    
                <Row>
                    <Col span="11">
                    <Form-item label="模板code：">
                        <Input v-model.trim="temp_add_data.code" placeholder="请输入"></Input>
                    </Form-item>
                    </Col>
    
                    <Col span="11" offset="2">
                    <Form-item label="模板类型：">
                        <Input v-model.trim="temp_add_data.templateType" placeholder="请输入"></Input>
                    </Form-item>
                    </Col>
                </Row>
    
                <Form-item label="模板内容：">
                    <Input v-model.trim="temp_add_data.content" type="textarea" placeholder="请输入"></Input>
                </Form-item>
    
                <Row>
                    <Col span="11">
                    <Form-item label="字数：">
                        <Input v-model="temp_add_data.originalWordNum" placeholder="请输入"></Input>
                    </Form-item>
                    </Col>
                    <Col span="11" offset="2">
                    <Form-item label="参数个数：">
                        <Input v-model="temp_add_data.paramsCount" placeholder="请输入"></Input>
                    </Form-item>
                    </Col>
                </Row>
    
                <Form-item label="创建日期：">
                    <Date-picker type="date" placeholder="选择日期" v-model="temp_add_data.createTime"></Date-picker>
                </Form-item>
            </Form>
        </Modal>
    
        <Modal v-model="modal_edit_status" title="编辑短信模板" @on-ok="option_edit_save" @on-cancel="modal_cancel">
            <Form :model="temp_edit_data" :label-width="80">
                <Form-item label="模板名称：">
                    <Input v-model.trim="temp_edit_data.name" placeholder="请输入"></Input>
                </Form-item>
    
                <Row>
                    <Col span="11">
                    <Form-item label="模板code：">
                        <Input v-model.trim="temp_edit_data.code" placeholder="请输入"></Input>
                    </Form-item>
                    </Col>
    
                    <Col span="11" offset="2">
                    <Form-item label="模板类型：">
                        <Input v-model.trim="temp_edit_data.templateType" placeholder="请输入"></Input>
                    </Form-item>
                    </Col>
                </Row>
    
                <Form-item label="模板内容：">
                    <Input v-model.trim="temp_edit_data.content" type="textarea" placeholder="请输入"></Input>
                </Form-item>
    
                <Row>
                    <Col span="11">
                    <Form-item label="字数：">
                        <Input v-model="temp_edit_data.originalWordNum" placeholder="请输入"></Input>
                    </Form-item>
                    </Col>
                    <Col span="11" offset="2">
                    <Form-item label="参数个数：">
                        <Input v-model="temp_edit_data.paramsCount" placeholder="请输入"></Input>
                    </Form-item>
                    </Col>
                </Row>
    
                <Form-item label="创建日期：">
                    <Date-picker type="date" placeholder="选择日期" v-model="temp_edit_data.createTime"></Date-picker>
                </Form-item>
    
            </Form>
        </Modal>
    
        <Modal v-model="modal_del_status" title="删除短信模板" @on-ok="option_delete_save" @on-cancel="modal_cancel">
            <Form :model="temp_dele_data" :label-width="80">
                <p>您确定删除这个记录吗？</p>
    
            </Form>
        </Modal>
    
    </div>
</template>
<script>
export default {
    data() {
        return {

            //初始化url
            init_url: '/mes/core/flow',
            //添加一行url
            add_url: '/mes/core/smsTemp/baseAll',
            //修改一行url
            edit_url: '/mes/core/smsTemp/baseAll',
            //删除一行url
            del_url: '/mes/core/smsTemp/baseAll?id=',

            //表格标题
            header: [
                {
                    type: 'index',
                    width: 40,
                    align: 'center'
                },
                {
                    "title": "学院",
                    "key": "instituteName",
                    "width": 120,
                    "sortable": true,
                    render: (h, params) => {
                        return h('div', {                         
                        },params.row.instituteEntity.name)
                    }

                },
                {
                    "title": "应用",
                    "key": "appName",
                    "width": 120,
                    "sortable": true,
                     render: (h, params) => {
                        return h('div', {                         
                        },params.row.baseApplicationEntity.name)
                    }
                },
                {
                    "title": "短信签名",
                    "key": "signature",
                    "width": 120,
                    "sortable": true,
                     render: (h, params) => {
                        return h('div', {                         
                        },params.row.baseSmsSignatureEntity.signature)
                    }
                },
                {
                    "title": "短信模板",
                    "key": "tempName",
                    "width": 120,
                    "sortable": true,
                     render: (h, params) => {
                        return h('div', {                         
                        },params.row.baseSmsTemplateEntity.name)
                    }
                },
                {
                    "title": "手机号码",
                    "key": "phone",
                    "width": 120,
                    "sortable": true,
                },
                {
                    "title": "价格",
                    "key": "price",
                    "width": 80,
                    "sortable": true,
                    align: 'center',
                },
                {
                    "title": "字数",
                    "key": "wordCount",
                    "width": 80,
                },
                {
                    "title": "发送时间",
                    "key": "createTime",
                    "width": 110,
                    align: 'center',
                },
                {
                    "title": "内容",
                    "key": "content",
                    "min-width": 200,
                    align: 'center',
                },
               

            ],
            //表格数据源
            data_list: [],
            //表格数据源缓存
            data_cache_list: [],
            //添加modal对话框显示状态
            modal_add_status: false,
            //编辑modal对话框显示状态
            modal_edit_status: false,
            //删除modal对话框显示状态
            modal_del_status: false,
            //添加一行的临时数据
            temp_add_data: {
                name: '',
                code: '',
                originalWordNum: '',
                content: '',
                paramsCount: '',
                templateType: '',
                createTime: '',
            },
            //编辑一行的临时数据
            temp_edit_data: {
                id: '',
                name: '',
                code: '',
                originalWordNum: '',
                content: '',
                paramsCount: '',
                templateType: '',
                createTime: '',
            },
            //删除一行的临时数据
            temp_dele_data: {
                id: '',
                name: '',
                code: '',
                originalWordNum: '',
                content: '',
                paramsCount: '',
                templateType: '',
                createTime: '',
            },
            //删除一行的数据索引
            temp_dele_index: '',
            //编辑一行的数据索引
            temp_edit_index: '',
            //查询的名称
            name: '',

        }
    },
    methods: {
        //到处excel
        exportData(type) {
            if (type === 1) {
                this.$refs.table.exportCsv({
                    filename: '原始数据'
                });
            } else if (type === 2) {
                this.$refs.table.exportCsv({
                    filename: '排序和过滤后的数据',
                    original: false
                });
            }
        },

        //modal对话框取消事件
        modal_cancel() {
            this.$Message.info('操作已经取消');
        },
        //编辑按钮触发事件
        edit_show(params) {
            this.temp_edit_data = Object.assign({}, params.row);
            this.modal_edit_status = true;
            this.temp_edit_index = params.index;

        },
        //删除按钮触发事件
        delete_show(params) {
            this.modal_del_status = true;
            this.temp_dele_data = params.row;
            this.temp_dele_index = params.index;
        },
        //添加一行操作
        option_add_save() {
            var _self = this;
            this.$ajax.post(_self.add_url, this.temp_add_data)
                .then(function (response) {
                    if (response) {
                        if (response.data.status == 'success') {
                            _self.$Message.info('保存成功');
                            _self.temp_add_data.id = response.data.data;
                            _self.data_list.push(_self.temp_add_data);
                            _self.data_cache_list.push(_self.temp_add_data);
                            _self.temp_add_data = {
                                name: '',
                                code: '',
                                originalWordNum: '',
                                content: '',
                                paramsCount: '',
                                templateType: '',
                                createTime: '',
                            };
                            return;
                        }
                    }
                    _self.$Message.info('保存失败');
                })
                .catch(function (error) {
                    console.log(error);
                });

        },
        //修改一行操作
        option_edit_save() {
            var _self = this;
            this.$ajax.post(_self.edit_url, this.temp_edit_data)
                .then(function (response) {
                    var index = _self.$stringUtil.getStringIndex(_self.data_cache_list, _self.temp_edit_data.id);
                    _self.data_cache_list[index] = _self.temp_edit_data;
                    _self.data_list[_self.temp_edit_index] = Object.assign(_self.data_list[_self.temp_edit_index], _self.temp_edit_data);
                    _self.$Message.info('修改成功');
                })
                .catch(function (error) {
                    console.log(error);
                    _self.$Message.info('修改失败');
                });
        },
        //删除一行操作
        option_delete_save() {
            var _self = this;
            this.$ajax.delete(_self.del_url + this.temp_dele_data.id, )
                .then(function (response) {
                    if (response) {
                        if (response.data.status == 'success') {
                            _self.$Message.info('删除成功');
                            _self.data_list.splice(_self.temp_dele_index, 1);
                            var index = _self.$stringUtil.getStringIndex(_self.data_cache_list, _self.temp_dele_data.id);
                            _self.data_cache_list.splice(index, 1);
                            return;
                        }
                    }
                    _self.$Message.info('删除失败');
                })
                .catch(function (error) {
                    console.log(error);
                    _self.$Message.info('删除失败');
                });

        },
        //表格行点击事件
        rowClick(row) {
            //this.$emit('getAppId', row.id);
        },
        //根据模板名称查询模板
        findByTempName() {
            this.name = this.$stringUtil.stringTrim(this.name);
            var name = this.name;

            if (name == "") {
                this.data_list = this.data_cache_list.slice();
                return;
            }

            var match = this.$stringUtil.stringMatch;
            this.data_list = $.grep(this.data_cache_list, function (value) {
                if (match(value.name, name)) {
                    return value;
                }
            });
        }

    },
    mounted() {

        var _self = this;

        //初始化表单数据
        this.$ajax.get(_self.init_url)
            .then(function (response) {
                _self.data_list = response.data;
                _self.data_cache_list = _self.data_list.slice();
                console.log(_self.data_list);
            })
            .catch(function (error) {
                console.log(error);
            });
    }
}
</script>

<style>
.btn-group {
    margin-bottom: 5px;
}
</style>
